---

---

<!-- Footer inspired by Humming design -->
<footer
  class="footer-component"
  style="margin-top: 120px; padding: 48px 0; border-top: 1px solid #f1f3f4; background: #fafbfc;"
>
  <div
    class="footer-content"
    style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; color: #6c757d; flex-wrap: wrap; gap: 16px;"
  >
    <div style="display: flex; gap: 32px; flex-wrap: wrap;">
      <span>Based on Stanford DSPy</span>
      <span>TypeScript First</span>
    </div>
    <span>Machines as Agents™</span>
  </div>
</footer>

<style>
  @media (max-width: 768px) {
    footer {
      margin-top: 80px !important;
      padding: 32px 0 !important;
    }

    footer div {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 16px !important;
    }

    footer div div {
      flex-direction: row !important;
      gap: 16px !important;
    }
  }

  @media (max-width: 480px) {
    footer div div {
      flex-direction: column !important;
      gap: 8px !important;
    }
  }

  /* Dark mode styles */
  :root.dark .footer-component {
    border-top-color: #374151 !important;
    background: #1f2937 !important;
  }

  :root.dark .footer-content {
    color: #9ca3af !important;
  }
</style>
